<template>
  <div class="tab_box detail_background">

    <!--标题栏-->
    <header class="header-top clearfix co-flex">
      <a href="javascript:;" class="back-btn iconfont icon-fanhui co-f05" :class="{'red':isRed}" @click="backDetail()"></a>
      <h3 class="header-title text-center co-f1" v-html="headerTitle"></h3>
      <a class="co-f05"></a>
    </header>
    <!--内容-->
    <div class="main">
      <div class="content-title">
        <h2 class="title-text text-left" v-html="contentTitle"></h2>
      </div>
      <div class="white-bg-box pad-1rem">
        <table cellspacing="0" cellpadding="0" border="0" width="100%" class="custom-table left border-b-dashed td-padding">
          <thead class="color-999999">
          <tr>
            <th width="70%">材料名称</th>
            <th width="30%">含量</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in tableData">
            <td v-html="item.name"></td>
            <td v-html="item.consume+item.unit"></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <meun></meun>

  </div>
</template>

<script src="../../../../static/js/detailContent.js"></script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../../static/css/metro-detail.css"
</style>
